<template>
  <el-dialog title="组织详情" v-model="showFlag" destroy-on-close>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="组织名称" span="1">{{ department.departmentName }}</el-descriptions-item>
      <el-descriptions-item label="展示顺序" span="1">{{ department.orderNum }}</el-descriptions-item>
      <el-descriptions-item label="组织备注" span="2">{{ department.remark }}</el-descriptions-item>
      <el-descriptions-item label="上级组织" span="2">{{ department.parentName }}</el-descriptions-item>
      <el-descriptions-item label="创建人" span="1">{{ department.createUser }}</el-descriptions-item>
      <el-descriptions-item label="创建时间" span="1">{{ department.createTime }}</el-descriptions-item>
      <el-descriptions-item label="更新人" span="1">{{ department.updateUser }}</el-descriptions-item>
      <el-descriptions-item label="更新时间" span="1">{{ department.updateTime }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button type="primary" @click="closeDialog">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { getDepartmentById } from "@/api/modules/department";

// 控制弹窗显示
const showFlag = ref(false);

// 组织数据
const department = ref({
  departmentName: "",
  orderNum: 0,
  remark: ""
});

// 打开弹窗
const openDialog = id => {
  getDepartmentById(id).then(res => {
    if (res.code === 200) {
      department.value = res.data;
      showFlag.value = true;
    }
  });
};

// 关闭弹窗
const closeDialog = () => {
  showFlag.value = false;
};

// 暴露方法供外部调用
defineExpose({
  openDialog,
  closeDialog
});
</script>

<style scoped>
.el-dialog__body {
  padding: 20px;
}
</style>
